import React, { useEffect, useState } from 'react';
import Map from './components/Map';
import ColumnChart1 from './components/ColumnChart1';
import LineChart1 from './components/LineChart1';
import PieChart1 from './components/PieChart1';

export default function App() {

  let dataList = [{ "name": "北京", "value": 81 }, { "name": "福建", "value": 43 }]
  const [currentTime, setCurrentTime] = useState(new Date());
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div className="App" style={{ height: '100%' }}>
      <header>
        <h1>大屏可视化-ECharts</h1>
        <div className="showTime">{formatTime(currentTime)}</div>
      </header>
      <div className="mainbox">
        <div className="column">
          <div className="panel bar">
            <h2>柱形图-就业行业</h2>
            <div className="chart">
              <ColumnChart1></ColumnChart1>
            </div>
            <div className="panel-footer"></div>
          </div>
          <div className="panel line">
            <h2>
              折线图-人员变化 <a>2023</a>
            </h2>
            <div className="chart">
              <LineChart1></LineChart1>
            </div>
            <div className="panel-footer"></div>
          </div>
          <div className="panel pie">
            <h2>饼形图-年龄分布</h2>
            <div className="chart">
              <PieChart1></PieChart1>
            </div>
            <div className="panel-footer"></div>
          </div>
        </div>
        <div className="column">
          <div className="no">
            <div className="no-hd">
              <ul>
                <li>125811</li>
                <li>100000</li>
              </ul>
            </div>
            <div className="no-bd">
              <ul>
                <li>前端需求人数</li>
                <li>市场供应人数</li>
              </ul>
            </div>
          </div>
          <div className="map">
            <div className="map1"></div>
            <div className="map2"></div>
            <div className="map3"></div>
            <div className="chart">
              <Map data={dataList} />
            </div>
          </div>
        </div>
        <div className="column">
          <div className="panel bar2">
            <h2>柱形图-就业行业</h2>
            <div className="chart">图表</div>
            <div className="panel-footer"></div>
          </div>
          <div className="panel line2">
            <h2>折线图-播放量</h2>
            <div className="chart">图表</div>
            <div className="panel-footer"></div>
          </div>
          <div className="panel pie2">
            <h2>饼形图-地区分布</h2>
            <div className="chart">图表</div>
            <div className="panel-footer"></div>
          </div>
        </div>
      </div>
    </div>
  );
}

// 格式化时间字符串  
function formatTime(date) {
  const y = date.getFullYear();
  const mt = date.getMonth() + 1
  const day = date.getDate()
  const h = String(date.getHours()).padStart(2, '0'); // 补零  
  const m = String(date.getMinutes()).padStart(2, '0');
  const s = String(date.getSeconds()).padStart(2, '0');
  return `当前时间：${y}年${mt}月${day}日-${h}时${m}分${s}秒`;
}